<template>
  <div class="pageAll" ref="userPage" :style="PageStyle">
    <Tabs type="card">
      <TabPane label="角色管理" name=""></TabPane>
    </Tabs>

    <div class="content">

      <Row>
        <Col span="2">
          <Button icon="md-add" @click="add" type="primary">新增</Button>
        </Col>
      </Row>
      <br/>
      <Row>
        <Col span="6">关键字：<Input v-model="searchParams.key" placeholder="请输入关键字" clearable style="width: 60%"/>
        </Col>
        <Col span="6">
          <Button type="primary" icon="ios-search" @click="getData()">搜索</Button>
        </Col>
      </Row>
      <div class="tableComponents">
       <TableHelper ref="tableHelper" :action="actions.getRoles" :params="searchParams"
                     :columns="roleColumns"></TableHelper>
      </div>
    </div>

    <Drawer width="720" :title="operationName" :closable="true" v-model="drawerValue">
      <Form ref="roleDataNow" :model="roleDataNow" :rules="roleCheck">
        <Row>
          <Col span="12">
            <FormItem label="角色名称:" prop="name">
              <Input v-model="roleDataNow.name" placeholder="请输入角色名称" clearable style="width: 60%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="备注:" prop="note">
              <Input v-model="roleDataNow.note" placeholder="请输入备注" clearable style="width: 60%"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
            <Col span="18">
            <CheckboxGroup v-model="systemM" v-for="(item,index) in firstSysMenus" :key="index">
                <Checkbox :label="item.code">{{item.name}}</Checkbox>
                <Checkbox style="margin-left:1em;display: block;" v-for="(item1,index1) in item.firstMenuList"
                 :key="index1" :label="item1.code">{{item1.name}}</Checkbox>
            </CheckboxGroup>
            </Col>
        </Row>
        <Row>
            <Col span="18">
            <CheckboxGroup v-model="systemM2" v-for="(item,index) in secondSysMenus" :key="index">
                <span style="cursor: pointer;">{{item.name}}</span>
                <Checkbox class="checkbox" :label="item.code+'_'+index1" :value="checkBoxValue" style="margin-left:1em;display: inline-block;" v-for="(item1,index1) in item.functions" :key="index1">{{item1}}</Checkbox>
            </CheckboxGroup>
            </Col>
        </Row>
      </Form>
      <Row>
        <Col span="2" offset="17">
          <Button @click="drawerValue =false" type="warning">取消</Button>
        </Col>
        <Col span="2" offset="1">
          <Button @click="subData()" type="success">确定</Button>
        </Col>
      </Row>
    </Drawer>
  </div>
</template>
<script>
  import TableHelper from "../../../components/table/TableHelper"
  import {requestPost} from "../../../utils/js/HttpUtil"
  import messageUtil from "../../../utils/js/MessageUtil"
  import token from "../../../utils/js/config/token"

  export default {
    components: {
      TableHelper
    },
    data() {
      return {
        systemM:[],
        systemM2:[],
        operationName: "新增角色",
        firstSysMenus:[],
        secondSysMenus:[],
        secondSysMenusFunctions:[],
        checkBoxValue:false,
        allSelectList:[],
        roleDataNow: {
          roleId:0,
          name:"",
          note:"",
          permissionStr:"",
          subPermissionStr:"",
          version: 0,
          token:""
        },
        PageStyle: {
          height: ""
        },
        drawerValue: false,
        updateValue:false,
        searchParams: {
          key: ""
        },
        actions: {
          getPermissionMenus:"/system/role/getPermissionMenus",
          insertRole:"/system/role/insertRole",
          getRoles:"/system/role/getRoles",
          getPermissionByRoleId:"/system/role/getPermissionByRoleId",
          getToken:"/system/safe/getReSubmitToken",
          delRole:"/system/role/delRole",
          updateRole:"/system/role/updateRole"
        },
        //角色校验
        roleCheck:{
          name:[
            {required: true, message: '请输入角色名称', trigger: 'blur' }
          ]
        },
        roleColumns: [
          {
            title: '角色名称',
            render: (h, params) => {
              return h('span', params.row.name);
            }
          },
          {
            title: '角色备注',
            render: (h, params) => {
              return h('span',params.row.note);
            }
          },
          {
            title: '创建时间',
            render: (h, params) => {
              return h('span',params.row.createTime);
            }
          },
          {
            title: '操作',
            fixed: 'right',
            render: (h, params) => {
              return [
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      //查询单个数据并设置值
                      requestPost(this.actions.getPermissionByRoleId, {roleId: params.row.roleId}, (data) => {
                        //刷新数据
                           this.roleDataNow.roleId=params.row.roleId
                           this.roleDataNow.name=params.row.name
                           this.roleDataNow.note=params.row.note
                           
                           this.systemM=data.data.systemPermission
                           this.systemM2=data.data.subSystemPermission
                           this.roleDataNow.version=data.data.roleById.version
                      })
                      this.operationName = "修改角色"
                      this.drawerValue=true
                    }
                  }
                }, '编辑'),
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      messageUtil.confirm('确认删除？', () => {
                        requestPost(this.actions.delRole, {roleId: params.row.roleId}, (data) => {
                          messageUtil.message.success(data.message)
                          this.getData()
                        })
                      })
                    }
                  }
                }, '删除')
              ]
            }
          }
        ]
      }
    },
    methods: {
      getHeight() {
        this.PageStyle.height = window.innerHeight - 3.75 * 12 + 'px';
      },
      judge(s){
          for(var k=0;k<this.systemM2.length;k++){
              if(s==this.systemM2[k]){
                 return true;
                  break;
              }
          }
          return false;
      },
      subData() {
          let flag=true
          let str = ""
          for(let i=0;i<this.secondSysMenus.length;i++){
              let code = this.secondSysMenus[i].code
              let r = ""
              for(let j=0;j<this.secondSysMenus[i].functions.length;j++){
                   let s = code + "_" + j
                   if(this.judge(s)){
                       r+="1"              
                    }else{
                       r+="0"  
                    }
              }
              if(r==0){
                  continue;
              }
              if(flag){
                   str+= code+":"+r
                   flag=false
              }else{
                   str+= ","+code+":"+r
              }
          }
          this.roleDataNow.permissionStr=this.systemM.join(',')
          this.roleDataNow.subPermissionStr=str
          if(this.roleDataNow.name==0){
            messageUtil.message.error('角色名称不能为空')
          }else{
        if (this.roleDataNow.roleId == 0) {//代表新增
          this.roleDataNow.token=token.token
          requestPost(this.actions.insertRole, this.roleDataNow, (data) => {
            messageUtil.message.success(data.message)
            //完成后还原状态
            this.drawerValue = false
            this.roleDataNow.roleId=0
            this.$refs['roleDataNow'].resetFields()
            this.getData()
          })
        } else {//代表修改
          requestPost(this.actions.updateRole, this.roleDataNow, (data) => {
            messageUtil.message.success(data.message)
            //完成后还原状态
            this.drawerValue = false
            this.roleDataNow.roleId=0
            this.$refs['roleDataNow'].resetFields()
            this.getData()
          })
        }
        }
      },
      add() {
        //还原状态
        this.systemM=[]
        this.systemM2=[]
        this.roleDataNow.roleId=0
        this.$refs['roleDataNow'].resetFields()
        //重置标题
        this.operationName = "新增用户"
        //请求防止表单重复提交的接口
        this.getToken()
        //查询权限设置页内容
        //this.getPermissionMenu()
        this.drawerValue = true
      },
      getData() {
        this.$refs.tableHelper.getData()
      },
      //查询权限设置页总菜单内容（2类）
      getPermissionMenu(){
           requestPost(this.actions.getPermissionMenus,{},(data)=>{
               console.log(data.data)
               this.firstSysMenus=data.data.firstSysMenus
               this.secondSysMenus=data.data.secondSysMenus
               this.secondSysMenusFunction=data.data.secondSysMenus[0].functions

               let arr=[]
               this.secondSysMenus.forEach((item,index)=>{
                 arr.push([])
                 item.functions.forEach((item1,index1)=>{
                    arr[index].push(false)
                 })
               })
               this.allSelectList=arr
           })
      },
      getToken(){
         requestPost(this.actions.getToken,{}, (data) => {
             token.token=data.data
             this.roleDataNow.token=token.token
         })
      }
    },
    created() {
      //window.addEventListener('resize', this.getHeight);
      this.getHeight()

    },
    mounted() {
      this.getPermissionMenu()
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
    }
  }
</script>
<style scoped="scoped">
  .pageAll {
    overflow: auto;
  }

  .content {
    padding-left: 2%;
    padding-right: 2%;
  }

</style>
